<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <style>
        body {
            padding: 0;
            margin: 0;
            background: url("img/img.png") no-repeat center center fixed; /* 背景图片 */
            background-size: cover;
            font-family: 'Helvetica Neue', sans-serif; /* 现代字体 */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .loginBox {
            background: rgba(255, 255, 255, 0.95); /* 白色半透明背景 */
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* 阴影效果 */
            padding: 40px;
            width: 450px;
            height: auto;
            text-align: center;
        }
        .loginLabel label {
            font-size: 32px;
            font-weight: bold;
            color: #333;
            text-transform: uppercase; /* 大写标题 */
            letter-spacing: 2px; /* 字母间距 */
            margin-bottom: 30px;
        }
        .form-group label {
            font-weight: bold;
            color: #555;
            font-size: 16px;
        }
        .form-control {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 12px;
            font-size: 16px;
            background: #f9f9f9; /* 浅色背景 */
            transition: all 0.3s ease;
        }
        .form-control:focus {
            border-color: #007BFF;
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
        }
        .loginBtn button {
            width: 100%;
            padding: 12px;
            font-size: 18px;
            border-radius: 8px;
            background: linear-gradient(135deg, #ff8a00, #e52e71); /* 渐变按钮 */
            border: none;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .loginBtn button:hover {
            background: linear-gradient(135deg, #e52e71, #ff8a00); /* 反转渐变 */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
        a {
            color: #e52e71; /* 品牌色 */
            text-decoration: none;
            font-size: 16px;
            transition: color 0.3s ease;
        }
        a:hover {
            color: #ff8a00; /* 品牌色变化 */
            text-decoration: underline;
        }
    </style>
    <script type="text/javascript">
        let alert_msg = '${alert_msg}';
        if (alert_msg != null && alert_msg.trim() != '') {
            window.alert(alert_msg);
        }
    </script>
</head>

<body>
<div class="container">
    <div class="loginBox">
        <form class="form-horizontal" action="AuthServlet?action=register" method="post" onsubmit="return check()">
            <div class="loginLabel">
                <label>高级服装店管理系统</label>
            </div>
            <div class="form-group">
                <label for="username" class="col-sm-3 control-label">账号</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="username" name="username" placeholder="请输入账号">
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="col-sm-3 control-label">密码</label>
                <div class="col-sm-9">
                    <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
                </div>
            </div>
            <div class="form-group">
                <label for="password2" class="col-sm-3 control-label">确认密码</label>
                <div class="col-sm-9">
                    <input type="password" class="form-control" id="password2" name="password2" placeholder="请确认密码">
                </div>
            </div>
            <div class="loginBtn">
                <button type="submit" class="btn btn-primary">注册</button>
            </div>
            <div class="text-center" style="margin-top: 20px;">
                <a href="login.jsp">登录</a>
            </div>
        </form>
    </div>
</div>
</body>
<script type="text/javascript">
    //提交之前进行检查，如果return false，则不允许提交
    function check() {
        //根据ID获取值
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        var password2 = document.getElementById("password2").value;
        if (username == "") {
            alert("用户名不能为空!");
            return false;
        }
        if (password == "") {
            alert("密码不能为空!");
            return false;
        }
        if (password2 != password) {
            alert("密码输入不一致!");
            return false;
        }
        return true;
    }
</script>
</html>